<template>
  <div class="navigation">
    <el-header>
      <el-menu class="nav-header" mode="horizontal">
        <el-submenu
          class="nav-header"
          index="1"
          style="float: right; margin-right: 20px"
        >
          <template slot="title"
            ><span style="font-size: 1.3em">{{ username }}</span></template
          >
          <el-menu-item
            index="1-1"
            class="header-child-font"
            @click.native="logout"
          >
            <i class="el-icon-s-release"></i>
            退出登录
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Navigation",
  computed: {
    ...mapState({
      username: (state) => state.login.username,
    }),
  },
  methods: {
    changeSidebar(path, index) {
      if (path !== "logout") this.$router.push(path);
    },

    async logout() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("Logout").then(() => {
            this.$message.success("退出成功!");
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.navigation {
  min-width: calc(100vw - 200px);
  position: fixed;
  margin-left: 200px;
  z-index: 1000;
}

.el-header {
  padding: 0px;
}

.nav-header.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  padding-top: 3px;
}

.nav-header > .el-submenu__title .el-submenu__icon-arrow {
  padding-top: 3px;
}

.header-child-font {
  font-weight: 100;
  letter-spacing: 3px;
}

.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 80px !important;
}
</style>